<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入lodash -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
        // 对象的引用赋值
        const info = {
            name: 'dcl',
            age: 18
        };
        const obj = info;
        info.name = 'Steve Jobs';
        // 对象的引用共用同一个地址
        console.log(obj.name); // Steve Jobs

        // 对象的浅拷贝
        const message = {name: 'dcl',age: 18,friend:{name:'Jack'}};
        const foo = Object.assign({},message);

        // 使用lodash
        const lodashM = _.clone(message);

        message.name = 'James';
        message.friend.name = 'Jenny';
        // 对象的浅拷贝，对象中再次嵌套对象时候，再次嵌套的对象共用同一个地址
        console.log(foo); // {name: 'dcl', age: 18, friend: {name: 'Jenny'}}


        console.log('lodashM',lodashM); // {name: 'dcl', age: 18, friend: {name: 'Jenny'}}



        // 对象的深拷贝
        const userInfo = {name: 'dcl',age: 18,friend:{name:'Jack'}};
        const copyUserInfo = JSON.stringify(userInfo);
        console.log(copyUserInfo); // {"name":"dcl","age":18,"friend":{"name":"Jack"}}
        // 把对象转为对象字符串再转为对象，对象内容会分配一个新的地址
        const copyInfo = JSON.parse(JSON.stringify(userInfo));

         // 使用lodash
         const lodashInfo = _.cloneDeep(userInfo);
        console.log('lodashInfo',lodashInfo); // {"name":"dcl","age":18,"friend":{"name":"Jack"}}
        console.log(copyInfo); // {name: 'dcl', age: 18, friend: {name: 'Jack'}};
        userInfo.friend.name = 'Steve Jobs';
        console.log(copyInfo.friend.name); // Jack
        console.log('lodashInfo.firend.name:',lodashInfo.friend.name);// Jack

    </script>
</body>
</html>